<template>
  <van-nav-bar
    title="购物车"
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
    fixed
    placeholder
  />
  <div class="list">
    <van-card
      :num="item.num"
      :price="item.originprice"
      desc="描述信息"
      :title="item.proname"
      :thumb="item.img1"
      :thumb-link="'http://localhost:5173/#/detail?proid=' + item.proid"
      v-for="(item, index) in cartListArr"
      :key="item.cartid"
    >
      <template #tags>
        <van-tag plain type="primary">{{ item.discount }}折</van-tag>
        <!-- <van-tag plain type="primary">标签</van-tag> -->
      </template>
      <template #footer>
        <van-stepper
          v-model="item.num"
          theme="round"
          button-size="22"
          disable-input
          @change="numChange(item)"
        />
        <!-- <van-button size="small" @click="addFn(item)">+</van-button>
      <van-button size="small">-</van-button> -->
        <van-checkbox v-model="item.flag" @change="changeFn(item)">选中</van-checkbox>
        <van-button type="danger" @click="delCartListFn(item.cartid)">删除</van-button>
      </template>
    </van-card>
  </div>

  <van-submit-bar :price="countPrice" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="allChecked" @click="changeSelectAll">全选</van-checkbox>
    <template #tip> 你的收货地址不支持配送, <span @click="onClickLink">修改地址</span> </template>
  </van-submit-bar>
</template>

<script setup>
import axios from 'axios'
import { computed, ref, watchEffect } from 'vue'
import { num } from '@/stores/huibiao'
import { delCart } from '@/api/cart'
import { showSuccessToast } from 'vant'

let allChecked = ref(false)
let token = localStorage.getItem('token')
let userid = localStorage.getItem('userid')
//获取购物车列表
let cartApi = ref('http://localhost:3001/api/cart/list')
let cartListArr = ref([])
async function getCartList() {
  let r = await axios.post(cartApi.value, { userid }, { headers: { token } })
  // console.log(r.data)
  if (r.data.data) {
    cartListArr.value = r.data.data
    num.value = r.data.data.length
  } else {
    cartListArr.value = []
    num.value = 0
  }
}
getCartList()

//修改状态
let cartCheckApi = ref('http://localhost:3001/api/cart/selectone')
async function changeFn(item) {
  let r = await axios.post(
    cartCheckApi.value,
    { cartid: item.cartid, flag: item.flag },
    { headers: { token } },
  )
  // console.log(r.data)
}
//修改购物车商品数量
let cartAddApi = ref('http://localhost:3001/api/cart/updatenum')
async function numChange(item) {
  let r = await axios.post(
    cartAddApi.value,
    { cartid: item.cartid, num: item.num },
    { headers: { token } },
  )
  console.log(r.data)
  getCartList()
}
//全选控制单选
let cartSelectAllApi = ref('http://localhost:3001/api/cart/selectall')
async function changeSelectAll() {
  let r = await axios.post(
    cartSelectAllApi.value,
    { userid, type: allChecked.value },
    { headers: { token } },
  )
  console.log(r.data)
  getCartList()
}
watchEffect(function () {
  if (cartListArr.value.length == 0) {
    allChecked.value = false
  } else {
    allChecked.value = cartListArr.value.every((item) => item.flag)
  }
})
//提交订单
function onSubmit() {
  console.log('提交订单')
}
//删除
async function delCartListFn(cartid) {
  delCart(cartid).then((res) => {
    showSuccessToast('删除成功')
    getCartList()
  })
}
//计算总价
let countPrice = computed(function () {
  let r = cartListArr.value
    .filter((v) => v.flag == true)
    .reduce((sum, v) => sum + v.originprice * v.num * 100, 0)
  return r
})
</script>

<style scoped>
.van-submit-bar {
  bottom: 51px;
}
.list {
  margin-bottom: 90px;
}
</style>
